<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="d3.v4.min.js"></script>
    <canvas width="960" height="960"></canvas>
    <script>
        const canvas = document.querySelector("canvas")
        context = canvas.getContext("2d")
        width = canvas.width
        height = canvas.height
        tau = 2*Math.PI

        const nodes = d3.range(1000)
        .map(d=>{
            return {
                // x:0,
                // y:0,
                r:Math.random()*14+4
            }
        })

        // console.log(nodes);

        const simulation = d3.forceSimulation(nodes)
        // .velocityDecay(0.2)??
        .force('x',d3.forceX().strength(0.5))
        .force('y',d3.forceY().strength(0.5))
        .force('collide',d3.forceCollide().radius(
            (d)=>{ return d.r - 7; }
        ).iterations(2))
        .on("tick",ticked)

        function ticked(){
            context.clearRect(0,0,width,height)
            context.save()
            context.translate(width/2,height/2)

            context.beginPath()
            nodes.forEach(function(d,i) {
                context.moveTo(d.x + d.r, d.y);
                // console.log(d.x,d.y,d.r,i);
                context.arc(d.x, d.y, d.r, 0, tau);
            });
            context.fillStyle = "#FFF";
            context.fill();
            context.strokeStyle = "#333";
            context.stroke();

            context.restore();
        }



    </script>
</body>
</html>